
import React, { useState } from "react";
import "./index.less";
import { example } from "./interface";

const Config = (props) => {
    const { setDragEnd, setNewParams, formList, setValid, valid } = props;
    const [list, setList] = useState(example);
    // fn 拖动开始
    function dragStartFn(item) {
        // 自动识别配置必要参数
        let param = {
            ...item,
            required: false, //是否必填
            disabled: false, //禁用
        };
        setNewParams(param);
        setDragEnd(false);
    }
    // fn 拖动结束
    function dragEndFn() {
        setDragEnd(true);
    }

    function renderList() {
        return list.map((item, index) => {
            return (
                <div
                    onDragStart={dragStartFn.bind(this, item)}
                    className="catalogue-item"
                    draggable="true"
                    onDragEnd={dragEndFn.bind(this)}
                    key={index}
                >
                    {item.label}
                </div>
            );
        });
    }

    return (
        <div
            onDragEnter={(e) => {
                if (!valid) return;
                e.preventDefault();
                setValid(false);
            }}
            className="catalogue"
        >
            {renderList()}
        </div>
    );
};

export default Config;
